<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no">
  <title>房间收益</title>
  <link rel="stylesheet" href="/mobile/css/index.css" />
  <script src="/mobile/js/vue.js"></script>
  <script src="/mobile/js/axios.min.js"></script>
  <script src="/mobile/js/vant.min.js"></script>
  <script src="/mobile/js/crypto-js.js"></script>
  <script src="/mobile/js/aes.js"></script>
  <script src="/mobile/js/common.js"></script>
  <style>
  * {
    margin: 0;
    padding: 0;
    -webkit-user-select: none;
    /* Safari */
    -moz-user-select: none;
    /* Firefox */
    -ms-user-select: none;
    /* IE10+/Edge */
    user-select: none;
    /* Standard syntax */
    list-style: none;
    color: #fff !important;
  }

  #app {
    padding: 10px;
    background: #05071D;
    min-height: 100vh;
    box-sizing: border-box;
    background-repeat: no-repeat;
    background-position: top center;
    background-size: contain;
  }
  .list {
    border-top: 1px solid #fff;
    border-left: 1px solid #fff;
    font-size: 12px;
    text-align: center;
  }
  .table-header {
    font-weight: bold;
    font-size: 14px;
  }
  .van-row {
    border-bottom: 1px solid #fff;
  }
  .van-col {
    border-right: 1px solid #fff;
  }
  .table-item .van-col {
    padding: 5px 0;
    line-height: 1;
    min-height: 22px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .btn {
    text-decoration: underline;
  }
  .van-empty__image {
    width: 200px;
    height: 150px;
  }

  </style>
</head>

<body>
  <div id="app">
    <van-list v-model="loading" :finished="finished" @load="getData" :immediate-check="false">
      <template v-if="!list.length">
        <van-empty
          class="custom-image"
          image="/mobile/img/empty.png"
          description="暂无数据"
        />
      </template>
      <div v-else class="list">
        <van-row class="table-header">
          <van-col span="6">时间</van-col>
          <van-col span="8">房间标题</van-col>
          <van-col span="6">房间总流水</van-col>
          <van-col span="4">详情</van-col>
        </van-row>
        <van-row class="table-item" v-for="(item, index) in list" :key="index">
          <van-col span="6">{{date}}</van-col>
          <van-col span="8">{{item.title}}</van-col>
          <van-col span="6">{{item.totalPearl}}</van-col>
          <van-col span="4" class="btn" @click="getDetail(date, item.liveId)">查看</van-col>
        </van-row>
      </div>
    </van-list>
  </div>
  <script>
  new Vue({
    el: '#app',
    data: {
      token: '',
      date: '',
      finished: false,
      loading: false,
      list: [],
      page: {
        page: 1,
        limit: 40
      }
    },
    created() {
      const parse = (queryStr) => {
        const str = queryStr.replace(/^\?/, '')
        return str.split('&').reduce((pre, key) => {
          const [k, v] = key.split('=')
          pre[decodeURIComponent(k)] = decodeURIComponent(v)
          return pre
        }, {})
      }
      var data = parse(location.search)
      console.log(data)
      if (data.date && data.token) {
        this.date = data.date
        this.token = data.token
        this.getData()
      }
    },
    methods: {
      getData() {
        request.post('/api/business/app/family/getFamilyRoomEarnings', {
          ...this.page,
          dayDate: this.date
        }).then(res => {
          console.log(res)
          if (!res.data.list.length) {
            this.finished = true
            return
          }
          this.loading = false

          this.total = res.data.totalCount
          this.list = this.list.concat(res.data.list)
          this.page.page += 1
        })
      },
      getDetail (date, roomId) {
        location.href = `./analysis-user.html?date=${date}&roomId=${roomId}&token=${this.token}`
      }
    }
  })
  </script>
</body>

</html>